<!--文章详情-->
<template>
  <section class="article-detail" v-if="article">
    <div class="article-container">
      <div style="float: right;display: flex;align-items: center;">
        <div :style="article.status === 0 ? 'width: 35px;font-size:16px' : 'width: 50px;color:#f5b4ca;font-size:16px'" @click="love(article.status)" v-if="userId !== article.user_id">{{article.status === 0 ? '收藏': '已收藏'}}</div>
        <div style="color:red;margin-left:10px;font-size:16px" @click="modal2 = true" v-if="userId === article.user_id">删除文章</div>
      </div>
      <h1 class="article-title">
        {{article.title}}
      </h1>
      <ul class="article-intro">
        <li class="articles-item-category" v-if="article.category">
          {{article.category.name}}
        </li>
        <li>
          <Icon size="16" type="ios-person-outline" style="color:#f5b4ca"/>
          {{article.author}}
        </li>
        <li>
          <Icon size="16" type="ios-eye-outline" style="color:#f5b4ca"/>
          {{article.browse}}
        </li>
        <li v-if="article.article_comment">
          <Icon size="16" type="ios-text-outline" style="color:#f5b4ca"/>
          {{article.article_comment.data.length ? article.article_comment.data.length : 0}}
        </li>
      </ul>
      <div class="article-content">
        <p style="font-size:18px">{{article.content}}</p>
        <!-- <mavon-editor
            style="height: 100%"
            :ishljs="true"
            v-model="article.content"
            :defaultOpen="'preview'"
            :editable="false"
            :subfield="false"
            :toolbarsFlag="false"/> -->
      </div>
      <div>
        <img :src="article.cover" alt="" style="width:100%">
      </div>
      <!-- 新建评论-->
      <div class="comment-header">
        <Icon type="ios-create-outline"/>
        欢迎评论
      </div>
      <v-comment-create
          :target_id="article.id"
          :target_type="targetType"
          @updateComment="updateComment"/>
      <!-- 评论列表-->
      <div v-if="article.article_comment.data.length > 0">
        <v-comment-list @delComment="againList" :target_id="parseInt(id)" @updateComment="updateComment"/>
      </div>
    </div>

    <!-- 侧边栏 -->
    <v-main-sidebar/>
    <Modal
        v-model="modal1"
        title="收藏"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="article" :model="article" :rules="ruleInline" :label-width="100">
            <FormItem prop="name" label="收藏夹名称">
                <Input type="text" v-model="article.name" placeholder="请输入收藏夹名称">
                </Input>
            </FormItem>
            <FormItem prop="remark" label="收藏夹备注">
                <Input type="textarea" v-model="article.remark" placeholder="请输入收藏夹备注">
                </Input>
            </FormItem>
        </Form>
    </Modal>
    <Modal
        v-model="modal2"
        @on-ok="ok1"
        @on-cancel="cancel1">
        <p>是否删除该文章</p>
    </Modal>
  </section>
</template>

<script>
  import { mapActions } from 'vuex'
  import user from '../../api/articles'
  export default {
    components: {
      VCommentList: () => import('../../components/comment-list'),
      VCommentCreate: () => import('../../components/comment-create'),
      VMainSidebar: () => import('../../components/main-sidebar')
    },
    name: 'detail',
    data() {
      return {
        article: {
          name: '',
          remark: '',
        },
        id: this.$route.query.id,
        targetType: 'article',
        list: [],
        modal1: false,
        modal2: false,
        ruleInline: {
            name: [
                { required: true, message: '请输入收藏夹名称', trigger: 'blur' }
            ],
            remark: [
                { required: true, message: '请输入收藏夹备注', trigger: 'blur' },
            ]
        },
        userId: Number(localStorage.userid)
      }
    },
    created() {
      this.getArticle()
      this.getLove()
    },
    methods: {
      ok () {
        this.addLove('createLove')
      },
      cancel () {
          this.$Message.info('关闭对话框');
      },
      ok1 () {
        this.removeArtice()
      },
      cancel1 () {
          this.$Message.info('关闭对话框');
      },
      ...mapActions({
        getArticleDetail: 'articles/detail'
      }),
      async getArticle() {
        const r = await this.getArticleDetail({
          id: this.id
        })
        this.article = r?.data?.data
        this.$store.commit('comment/SET_COMMENT_LIST', r?.data?.data?.article_comment?.data)
        this.$store.commit('comment/SET_COMMENT_PAGE', r?.data?.data?.article_comment?.meta)
        for(let v of this.list) { 
          if(v.article_id === this.article.id) { 
            this.$set(this.article,'status',1)
          }
        }
      },
      /**
       * 更新评论
       **/
      updateComment(newComment, type) {
        if (type === 'comment') {
          this.article?.article_comment?.data?.unshift(newComment)
        } else if (type === 'reply') {
          this.getArticle()
        }
      },
      love(status) { 
        if(status === 0) { 
          this.modal1 = true
        }else{ 
          this.removeLove('removeLove')
        }
      },
      async addLove() { 
        try{ 
          this.article.user_id = localStorage.userid
          this.article.article_id = this.article.id
          const { data : res } = await user.createLove(this.article)
          if(res.code !== 200) return this.$Message.error('系统繁忙')
          this.$Message.success('收藏成功')
          this.$set(this.article,'status',1)
        }catch(e) { 
          console.log(e);
        }
      },
      async removeLove() { 
        try{ 
          this.article.article_id = this.article.id
          const { data : res } = await user.removeLove({
            article_id: this.article.id
          })
          if(res.code !== 200) return this.$Message.error('系统繁忙')
          this.$Message.success('取消收藏成功')
          this.$set(this.article,'status',0)
        }catch(e) { 
          console.log(e);
        }
      },
        async getLove() {
            const params = {
                page: 1,
                user_id: localStorage.userid,
                status: 1
            }
            const r = await user.love(params)
            this.list = r?.data?.data?.data
        },
        async removeArtice() { 
          try{ 
              const { data :res } = await user.userDelArticle({
                id: this.article.id
              })
              if(res.code !== 200) return this.$Message.error('系统繁忙')
              this.$Message.success('删除文章成功')
              this.$router.push('/article-list')
          }catch(e) { 
            console.log(e);
          }
        },
        againList() { 
          this.getArticle()
        }
    }
  }
</script>

<style scoped lang="less">
  .article-detail {
    width: @window-Width;
    margin: 24px auto;
    min-height: 80vh;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
  }

  .article-content{ 
    padding-bottom: 30px;
  }
  .article-container {
    box-sizing: border-box;
    flex: 1;
    padding: 32px;
    margin-right: 32px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 2px 3px #f0f0f0;
    background: #fff;
  }

  .article-title {
    color: #17233d;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
  }

  .article-intro {
    color: #515a6e;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0;
  }

  .article-intro li {
    display: flex;
    align-items: center;
    margin-right: 24px;
    font-size: 16px;
    color: #9ea7b4;
    white-space: nowrap;
  }

  li.articles-item-category {
    height: 28px;
    line-height: 28px;
    padding: 0 24px;
    font-size: 16px;
    color: #f5b4ca;
    border-radius: 64px;
    background: rgba(51, 119, 255, .1);
  }

  .comment-header {
    font-size: 28px;
    font-weight: 500;
    color: #2d8cf0;
    padding: 32px 0 16px;
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 200px) and (max-width: 750px) {
    .article-detail {
      width: 100%;
    }

    .article-container {
      margin-right: 0;
    }
  }
</style>
